<template>
  <div>
      <!-- 
        接口地址：https://www.codeboy.com/mfresh/data/news_select.php
        1.引入axios模块
        2.在methods选项中，制作一个getData方法，绑定在按钮点击事件
        3.getData中书写axios请求，点击后台查看数据
        4.data选项中，制作 data属性，把请求到的数据保存到这来
        5.页面上用div 配合 v-if 判断data存在，再进行数据使用
        6.利用 div + v-for 完成数据的展示，添加css
       -->
       <button @click="getData">获取数据</button>
       <div v-if="data" class="box">
         <div v-for="x in data.data" :key="x.nid">
            <p>{{x.title}}</p>
         </div>
       </div>
  </div>
</template>

<script>
import axios from 'axios'
  export default {
    methods: {
      getData() {
        const url = 'https://www.codeboy.com/mfresh/data/news_select.php'
        axios.get(url).then(res=>{
          console.log(res);
          this.data=res.data
        })
      }
    },
    data() {
      return {
        data: null
      }
    },
  }
</script>

<style lang="scss" scoped>
.box{
  div{
    padding: 10px;
    border-bottom: 1px dashed gray;
  }
}
</style>
